
<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <span>文档上传</span>
      </div>
      
      <el-form ref="uploadForm" :model="uploadForm" :rules="rules" label-width="100px">
        <el-form-item label="文档标题" prop="title">
          <el-input v-model="uploadForm.title" placeholder="请输入文档标题" />
        </el-form-item>
        
        <el-form-item label="文档描述" prop="description">
          <el-input
            v-model="uploadForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入文档描述（可选）"
          />
        </el-form-item>
        
        <el-form-item label="选择文档" prop="file">
          <el-upload
            ref="upload"
            class="upload-demo"
            drag
            action="#"
            :auto-upload="false"
            :limit="1"
            :file-list="fileList"
            :on-change="handleFileChange"
            :on-remove="handleFileRemove"
            :before-upload="beforeUpload"
            accept=".pdf,.doc,.docx,.ppt,.pptx,.txt"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              支持格式：pdf、doc、docx、ppt、pptx、txt，文件大小不超过100MB
            </div>
          </el-upload>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitUpload" :loading="loading">
            立即上传
          </el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { uploadDocument } from '@/api/document'

export default {
  name: 'DocumentUpload',
  data() {
    return {
      uploadForm: {
        title: '',
        description: '',
        file: null
      },
      fileList: [],
      loading: false,
      rules: {
        title: [
          { required: true, message: '请输入文档标题', trigger: 'blur' },
          { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        file: [
          { required: true, message: '请选择文档文件', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handleFileChange(file, fileList) {
      this.uploadForm.file = file.raw
      this.fileList = fileList
    },
    handleFileRemove(file, fileList) {
      this.uploadForm.file = null
      this.fileList = fileList
    },
    beforeUpload(file) {
      const isLt100M = file.size / 1024 / 1024 < 100
      if (!isLt100M) {
        this.$message.error('上传文件大小不能超过 100MB!')
      }
      return isLt100M
    },
    submitUpload() {
      this.$refs.uploadForm.validate(valid => {
        if (valid) {
          if (!this.uploadForm.file) {
            this.$message.error('请选择文档文件')
            return
          }
          
          this.loading = true
          const formData = new FormData()
          formData.append('file', this.uploadForm.file)
          formData.append('title', this.uploadForm.title)
          formData.append('description', this.uploadForm.description)
          
          uploadDocument(formData).then(response => {
            this.$message.success('文档上传成功！')
            this.$router.push('/document/list')
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    resetForm() {
      this.$refs.uploadForm.resetFields()
      this.$refs.upload.clearFiles()
      this.uploadForm.file = null
      this.fileList = []
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-demo {
  width: 100%;
}
</style>
